<template>
	<view>
	    <!-- 导航 -->
		<!-- #ifndef APP-PLUS -->
		<uni-nav-bar :shadow="false" :border="false"  @clickLeft="clickLeft" @clickRight="clickRight">
			<block slot="left">
					<!-- <view>
						<text class="uni-nav-bar-text">{{ city }}</text>
					</view> -->
				<view class="iconfont icon-haoyou mx-2"
					style="font-size: 24px;"></view>
			</block>
			<block slot="right">
				<view class="icon iconfont icon-zengjia"
				style="font-size: 26px;"></view>
			</block>
		</uni-nav-bar>
		<!-- #endif -->
		
		<template v-if="messageList.length > 0">
		<!-- 消息列表 -->
			<block v-for="(item, index) in messageList" :key="index">
				<!-- 引入 消息列表 组件-->
				<msgList :item="item" :index="index"></msgList>
			</block>
		</template>
		<!-- 兜底样式 -->
		<template v-else>
			<noThing>暂无消息</noThing>
		</template>
		<!-- 顶部弹出层 -->
		<uni-popup ref="toPopup" type="top" background-color="#fff">
			<view
				class="flex align-center justify-center font-md border-bottom py-2"
				hover-class="bg-light"
				@click="popupEvent('friends')"
			>
				<text class="iconfont icon-sousuo mr-2"></text>
				添加好友
			</view>
			<view
				class="flex align-center justify-center font-md py-2"
				hover-class="bg-light"
				@click="popupEvent('clear')"
			>
				<text class="iconfont icon-shanchu mr-2"></text>
				清除列表
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// 引入消息列表组件
	import msgList from '@/components/msg/msg-list.vue';
	// 引入兜底样式
	import noThing from '@/components/common/no-thing.vue';
	// 引入vuex
	import { mapState } from 'vuex';
	export default {
		components: {
			msgList,
			noThing,
		},
		data() {
			return {
				// 消息列表数据
				// messageList: [],
			};
		},
		// 监听页面显示 ----------------------------------------------
		onShow() {
			// // 清除未读数，更新底部导航消息数显示
			// this.$store.dispatch('readChatMessage',this.item)
			this.messageList.forEach(v=>{
				console.log('message',v);
				this.$store.dispatch('readChatMessage',v)
			})
			
		},
		// 计算属性
		computed: {
			...mapState({
				messageList: (state) => state.chatList,
			}),
		},
		// 监听用户下拉动作，一般用于下拉刷新 -----------------------------
		onPullDownRefresh() {
			this.upRefresh();
		},
		// 监听原生导航栏按钮事件 --------------------------------------------------
		onNavigationBarButtonTap(e) {
			switch (e.index) {
				case 0: //索引0,点击了左边
					// 跳转到 好友列表页
					uni.navigateTo({
						url: '/pages/friend-list/friend-list',
					});
					// 关闭弹出层
					this.$refs.toPopup.close();
					break;
				case 1: //索引0,点击了右边
					this.$refs.toPopup.open();
					break;
			}
		},
		// 存放所有事件 ----------------------------------------------------------
		methods: {
		    // #ifndef APP-PLUS
			clickLeft(){
				this.navigateTo({
					url: '/pages/friend-list/friend-list',
				})
				this.$refs.toPopup.close()
			},
			clickRight(){
				this.$refs.toPopup.open()
			},
			// #endif
			// 下拉刷新
			upRefresh() {
				setTimeout(() => {
					// 数据请求 = 测试数据
					this.messageList = this.messageList;
					// 停止当前页面下拉刷新
					uni.stopPullDownRefresh();
				}, 1000);
			},
			// 弹出层选项点击事件
			popupEvent(e) {
				switch (e) {
					case 'friends':
						uni.navigateTo({
							// 搜索用户
							url: '../search/search?type=user',
						});
						break;
					case 'clear':
						this.$store.commit('clearChatList');
						uni.showToast({
							title: '清除成功',
							icon: 'none',
						});
						console.log('清除列表');
						break;
				}
				// 关闭弹出层
				this.$refs.toPopup.close();
			},
		},
	};
</script>

<style lang="scss"></style>
